<template>
  <div>
    <a-space v-if="refresh">
      <a-button
        v-for="(c, index) in Props.buttons"
        :key="index"
        v-bind="c"
        @click="c.function"
        >{{ c.title }}</a-button
      >
    </a-space>
  </div>
</template>
<script lang="ts" setup>
import props from "./props";
import { nextTick, ref } from "vue";
const Props: any = defineProps(props);

const refresh = ref(true);
function refreshFun() {
  refresh.value = false;
  nextTick(() => {
    refresh.value = true;
  });
}

function setLoading(index, status) {
  Props.buttons[index].loading = status;
  refreshFun();
}

function updateProps(index, label, value) {
  if (typeof label === "string") {
    Props.buttons[index][label] = value;
  } else {
    Object.assign(Props.buttons[index], label);
  }

  refreshFun();
}

defineExpose({ setLoading,updateProps});
</script>
